<template>
  <div>
  <el-dialog :title="'测评票统计'" :fullscreen='true' :close-on-click-modal="false" :visible.sync="statistical3DialogData.visible" width="100%">
    <div class="fontDa fontDaTwo" v-loading.fullscreen.lock="fullscreenLoading13">
      <div class="customTableHeader">
        <div style="text-align:right; margin-bottom: 10px;">
          <el-button type="primary" @click="detailBtn">综合得分明细</el-button>
          <el-button type="primary" @click="exportExcel(cppName+'_会议')">导出统计表</el-button>
        </div>
        <!-- <div class="customTableTitle">{{ cppName }}</div> -->
      </div>
      <div id="one">
        <div class="customTableHeader headers">
          <div class="customTableTitle"><tr><td>{{ cppName }}</td></tr></div>
        </div>

        <el-table :data="tableData" :span-method="objectSpanMethod">
          <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
          <el-table-column v-for="(col,index) in colShowAll" :prop="col.prop" :label="col.label" v-if="!col.hidden" min-width="100" :key="index" align="center"></el-table-column>
          <el-table-column label="票数统计" align="center" min-width="300">
              <el-table-column v-for="(gz,j) in tableColumn"  :label="gz.label" :prop="gz.prop" align="center" :key="j+'qq'" min-width="100">
              </el-table-column>
          </el-table-column>
        </el-table>
        <div v-for="(item,index) in questionList" :key="index+'yy'" id="ql">
          <el-table :span-method="objectSpanMethod" :data="item.answer" ref="report-table" border>
             <el-table-column type="index"  label="序号" width="70"  align="center"></el-table-column>
             <el-table-column  :label="item.title" prop="answer"  align="left"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      append-to-body
      :fullscreen='true'
      :close-on-click-modal="false"
      width="100%">
      <div class="fontDa fontDaTwo">
        <div class="customTableHeader">
          <div style="text-align:right; margin-bottom: 10px;">
            <el-button type="primary" style="margin-bottom: 20px;text-align: right;" @click="exportExcelDetail(cppName+'明细')">导出</el-button>
          </div>
        </div>
        <div id="details">
          <div class="cpTable one" style="margin-bottom:40px;" id="detail">
            <div class="customTableHeader headers">
              <div class="customTableTitle h_title"> <tr><td>{{ cppName }}</td></tr></div>
            </div>
            <el-table :data="tableData2" :span-method="objectSpanMethod">
              <el-table-column type="index" label="序号"  width="70"  align="center">
              </el-table-column>
              <el-table-column v-for="(col,index) in colShowAll" :prop="col.prop" :label="col.label"  width="100" :key="index+'rrr'"></el-table-column>
              <el-table-column label="票数统计" align="center" min-width="300">
                <el-table-column :prop="col.prop" :label="col.label" v-for="(col,index) in groupTitle" :key="index+'uuu'" align="center">
                  <el-table-column :prop="colChild.prop" :label="colChild.label" v-for="(colChild,index3) in col.child" align="center" min-width="140" :key="index3+'bb'">
                  </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>

          </div>

          <div class="questions one"  style="margin-top: 40px;margin-bottom:40px;" id="ql1">
            <el-table ref="report-table" v-for="(i,k) in questionGroup.tableColumn" :data="i.tableData" :key="k+'jjj'" 		border:row-class-name="tableRowClassName">
               <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
               <el-table-column :label="i.label" :prop="i.prop" align="left">
                   <el-table-column :label="i.children[0].label" :prop="i.children[0].prop">
                   </el-table-column>
               </el-table-column>
            </el-table>
          </div>
          <div class="dc">
            <el-button type="primary" @click="dialogVisible = false" style="text-align: right;">关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </el-dialog>
  </div>
</template>

<script>
import { getData4P3DHz} from '@/api/ceping/cepinghzglb'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    props:{
        statistical3DialogData:{},
    },
  data() {
    return {
      cppName:"",
      params: {
        hzId: "",
      },
      fullscreenLoading13:false,
      tableColumn: [],
      tableColumnDetail:[],
      tableData: [],
      tableDataDetail:[],
      colShowAll:[],
      questionList:[],
      questionGroup:[],
      tableData2:[],
      groupTitle:[],
      dialogVisible:false
    }
  },
  watch:{
    statistical3DialogData:{
        handler(newVal,oldVal){
            if(newVal.visible){
             //console.log(newVal)
              this.params.hzId = newVal.hzId;
             //console.log(this.hzId);
              //this.getListone();
              this.getListoneHz();

            }
        },
        deep:true,
        immediate:true,
    },
  },
  methods: {
    detailBtn(){
      this.dialogVisible = true
      //this.tableDataDetail = []
    },
    exportExcel(excelName) {
      try {
        const ql = document.getElementById('one')
        const $e = ql
        let $table = ql

        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {raw: true})
        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        FileSaver.saveAs(
          new Blob([wbout], {type: 'application/octet-stream'}),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    exportExcelDetail(excelName){
       try {
        const ql = document.getElementById('details')
        const $e = ql
        let $table = ql

        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {raw: true})
        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        FileSaver.saveAs(
          new Blob([wbout], {type: 'application/octet-stream'}),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    getListone(){
      this.fullscreenLoading13 = true;
      getData4P3DHz(this.params).then((response)=>{
          this.tableData = response.data.data.userXzValue;
          this.colShowAll = response.data.data.userTitle;
          this.tableColumn = response.data.data.xzTitle;
          this.questionList = response.data.data.wdList;
          this.cppName = response.data.data.title;
          this.cppNames = response.data.data.title +"明细";
          this.tableDataDetail = response.data.data.group;
          this.groupTitle = response.data.data.group[0].groupTitle;
          this.fullscreenLoading13 = false;
          this.tableDataDetail.forEach(item=>{
            this.tableData2.push(item.groupValue)
          })

      })
    },
	getListoneHz(){
      this.fullscreenLoading3 = true;
      getData4P3DHz(this.params).then((response)=>{
        this.tableData = response.data.data.userXzValue;
        this.colShowAll = response.data.data.userTitle;
        this.tableColumn = response.data.data.xzTitle;
        this.questionList = response.data.data.wdList;
        this.questionGroup = response.data.data.wdGroup;
        this.cppName = response.data.data.title;
        this.cppNames = response.data.data.title +"明细";
        this.tableDataDetail = response.data.data.group;
        this.groupTitle = response.data.data.group[0].groupTitle;
        this.tableData2=[]
        this.tableDataDetail.forEach(item=>{
          this.tableData2.push(item.groupValue)
        })
        this.fullscreenLoading3 = false;
      })

    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {

    },

  }
}
</script>

<style>
.h_dw_time{
  display: flex;
  justify-content: space-between;
}
.fontDaTwo .el-table{
  font-size:16px !important;
}
/* .fontDaTwo .cpTable .ql_list .el-table .cell{
  display: flex;
  justify-content: start!important;
} */
.h_title{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 2;
}
.fontDaTwo .cpTable .el-table .cell {
  text-align: center !important;
}
.dc{
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.headers{
  display: flex;
  justify-content: center;
}
</style>

